<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span>保险签约</span>
      </div>
      <div class="div" >
        <img v-show="isEdit !== 0"  src="../../../assets/蓝添加.png" @click="build()" alt="">
        <span  v-show="isEdit !== 0" class="solt" @click="build()">新建</span>
      </div>
    </header>
    <div class="listAll">
      <van-empty
        style="width: 100%;height: 100%"
        v-if="tabList.length <= 0"
        class="custom-image"
        description="暂无数据"
        :image="require('../../../assets/暂无数据.png')"
      >
      </van-empty>
      <div class="div_list"
           @click="runHis(item)"
           v-for="(item, index) in tabList" :key="index">
        <div class="div_left">
          <img v-show="Number(item.is_delete) === 0" src="../../../assets/保险编号.png" alt="">
          <img v-show="Number(item.is_delete) === 2" src="../../../assets/保险编号灰@2x.png" alt="">
        </div>
        <ul :class="[Number(item.is_delete) === 2 ? 'del' : '']">
          <li style="color: #333;font-size: 14px">
            <span class="title">保险编号</span>
            <span class="mao">:</span>
            <span>{{item.contract_no}}</span>
          </li>
          <li style="color: #666">
            <span class="title">保单机构</span>
            <span class="mao">:</span>
            <span>{{item.sign_dept}}</span>
          </li>
          <li style="color: #666">
            <span class="title">投保人</span>
            <span class="mao">:</span>
            <span>{{item.insure_sign_url}}</span>
          </li>
          <li style="color: #666">
            <span class="title">被保险人</span>
            <span class="mao">:</span>
            <span>{{item.assured_sign_url}}</span>
          </li>
          <li style="color: #666">
            <span class="title">申请日期</span>
            <span class="mao">:</span>
            <span>{{item.assign_date}}</span>
          </li>
          <li class="liBtn" v-show="isEdit !== 0 && Number(item.is_delete) !== 2">
            <button v-show="Number(item.is_delete) !== 2" @click.stop="update(item, index)">修改</button>
            <button v-show="Number(item.is_delete) === 0" class="zhengChang delete" @click.stop="clickDel(item.id, item)">作废</button>
          </li>
        </ul>
        <div class="div_right" v-show="Number(item.is_delete) === 2 && isEdit !== 0">
<!--          <span v-show="Number(item.is_delete) === 0 && isEdit !== 0" class="zhengChang" @click.stop="clickDel(item.id, item)">作废</span>-->
          <span  class="zuoFei">已作废</span>
        </div>
      </div>
    </div>
    <van-dialog v-model="delshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认作废本条记录吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'BaoxianList',
  data () {
    return {
      op_user_id: this.$route.query.myUserid, // 操作人id
      sign_user_id: this.$route.query.userid, // 签署人员id
      tabList: [],
      id: 0,
      delshow: false,
      NowItem: [],
      time: this.$route.query.time,
      isEdit: Number(this.$route.query.isEdit)
    }
  },
  mounted () {
    this.getfindAllInsurance()
  },
  methods: {
    // 作废确认按钮
    delConfirm () {
      this.delinsuranceZuofei()
    },
    // 作废接口
    delinsuranceZuofei () {
      this.$http.insuranceZuofei({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.NowItem.is_delete = 2
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击作废按钮
    clickDel (id, item) {
      this.NowItem = item
      this.id = id
      this.delshow = true
    },
    // 获取列表信息
    getfindAllInsurance () {
      if (this.time !== undefined && this.time !== null && this.time !== '') {
      } else {
        this.time = ''
      }
      this.$http.findAllInsurance({sign_user_id: this.sign_user_id, startTime: this.time, endTime: this.time})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.tabList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 新建保险
    build () {
      this.$router.push({path: '/insurance', query: {'userid': this.sign_user_id, 'myUserid': this.op_user_id}})
    },
    // 点击修改
    update (item, index) {
      if (Number(item.is_delete) === 0) {
        this.$router.push({path: '/insurance', query: {'userid': this.sign_user_id, 'myUserid': this.op_user_id, 'id': item.id}})
      }
    },
    // 跳转历史记录
    runHis (item) {
      if (Number(item.is_delete) === 0) {
        this.$router.push({path: '/insurance', query: {'userid': this.sign_user_id, 'myUserid': this.op_user_id, 'id': item.id, isEdit: 0}})
      }
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
    font-family: "PingFang SC";
  }
  header{
    width: 100vw;
    height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) img{
    width: 13px;
    height: 13px;
    margin-right: 3px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .solt{
    color: #1DA4F2;
    font-size: 15px;
  }
  .tableAll{
    width: 92%;
    border: 1px solid #E5E5E5;
    border-radius: 10px 10px 0px 0px;
    overflow:hidden;
    margin: 10px auto;
  }
  table tr th, td{
    text-align: center;
    border-left: 1px solid #E5E5E5;
    border-top: 1px solid #E5E5E5;
  }
  td{
    height: 25px;
    font-size: 12px;
    background: white;
  }
  table tr th {
    height: 35px;
    background: rgba(29, 164, 242, 1);
    color: white;
    font-size: 13px;
  }
  .listAll .div_list{
    width: 92%;
    padding: 8px 10px;
    box-sizing: border-box;
    background: white;
    margin: 10px auto auto auto;
    border-radius: 10px;
    display: flex;
    /*box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.03);*/
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
  }
  .div_list:last-child{
    margin-bottom: 30px;
  }
  .div_list ul{
    width: 90%;
    /*width: 77%;*/
  }
  .div_left{
    width: 8%;
    padding: 3px 0;
    box-sizing: border-box;
  }
  .div_left img{
    width: 18px;
    height: 18px;
  }
  .div_right{
    width: 15%;
  }
  .div_right .zhengChang{
    background: rgba(29, 164, 242, 0.1);
    color: #1DA4F2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 12px;
    padding: 3px 0px;
    box-sizing: border-box;
  }
  .liBtn{
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .liBtn button{
    width: 60px;
    height: 29px;
    font-size: 15px;
    border-radius: 4px;
    color: #1DA4F2;
    border: 1px solid #1DA4F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    background: transparent;
  }
  .delete{
    background: transparent !important;
    border: 1px solid #E5E5E5 !important;
    color: #333!important;
  }
  .zuoFei{
    background: rgba(229, 229, 229, 1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 12px;
    padding: 3px 0px;
    box-sizing: border-box;
  }
  .listAll ul li{
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .mao{
    margin: 0 5px;
  }
  .title{
    width: 60px;
    text-align: justify;
    text-align-last: justify;
  }
  /deep/ .van-empty__image {
    width: 160px;
    height: 100px;
  }

  /deep/ .van-empty__image img {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty{
    width: 100%;
    height: 60vh !important;
  }
  .del{
    width: 77% !important;
  }
  .del>*{
    color: #999999 !important;
  }
</style>
